<template>
	<view>
		<view class="container">
			<uni-section title="维修申请" type="line" padding style="height: calc(100vh - 100px);">
				<uni-data-picker placeholder="请选择维修项目" popup-title="请选择家居" :localdata="dataTree" v-model="classes"
					@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
					@popupclosed="onpopupclosed">
				</uni-data-picker>
				<button @click="submit" class="button-login" hover-class="button-hover">下一步</button>
			</uni-section>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				classes: '1-2',
				dataTree: [{
						text: "家具",
						value: "1-0",
						children: [{
								text: "桌子",
								value: "1-1"
							},
							{
								text: "椅子",
								value: "1-2"
							}
						]
					},
					{
						text: "电器",
						value: "2-0",
						children: [{
								text: "空调",
								value: "2-1"
							},
							{
								text: "饮水机",
								value: "2-2"
							}
						]
					},
					{
						text: "门锁",
						value: "3-0",
						disable: false
					}
				]
			}
		},
		methods: {
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			submit(){
				
			}
		}
	}
</script>

<style>
	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}

	.popper__arrow {
		top: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-width: 0;
		border-bottom-color: #EBEEF5;
	}
</style>
